<template>
  <div class="center">
    <div class="data" id="tuzhuangstatistical_main"></div>
    <div class="name">
      <h1>涂装</h1>
      <span>计划完成：2250</span>
    </div>
  </div>
</template>
  <script>
import * as echarts from "echarts";
export default {
  name: "tuzhuangstatistical",
  data() {
    return {};
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let chartDom = document.getElementById("tuzhuangstatistical_main");
      let myChart = echarts.init(chartDom, "dark");
      let option;

      option = {
        backgroundColor: "", //设置无背景色
        tooltip: {
          formatter: "{a} <br/>{b} : {c}",
        },
        series: [
          {
            name: "涂装",
            type: "gauge",
            min: 0,
            max: 2000,
            itemStyle: {
              color: "#4880ff",
            },
            progress: {
              show: true,
              width: 30,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}",
              offsetCenter: [0, "-15%"],
            },
            //仪表盘轴线相关配置。
            axisLine: {
              show: true,
              // 属性lineStyle控制线条样式
              lineStyle: {
                width: 30,
              },
            },
            //仪表盘指针。
            pointer: {
              show: false,
              width: 0,
            },
            //分隔线样式。
            splitLine: {
              show: false,
            },
            //刻度样式。
            axisTick: {
              show: true,
              distance: -40,
            },
            //刻度标签。
            axisLabel: {
              show: false,
            },
            data: [
              {
                value: 398,
                name: "完成量:7.82%",
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
  <style  scoped>
.center {
  width: 100%;
  height: 100%;
}
.center .data {
  width: 18.75rem /* 300/16 */;
  height: 18.75rem /* 300/16 */;
}

.center .name {
  text-align: center;
  width: 120px;
  margin-left: 100px;
  margin-left: 90px;
  margin-top: -110px;
}

.center .name h1{
  color: #4880ff;
  height: 30px;
}

.center .name span{
  color: #FFF;
}
</style>
          